import React from 'react';
require("./log.css");

// 登录注册Log.js里面用到的图片轮播组件，4张480*400px大小的图片图片轮播组件，间隔4秒
const LunBo=React.createClass({
    getDefaultProps(){
        return{
            interval:4000,
            autoPlay:true,
            defaultActiveIndex:0,
            direction:'right'
        }
    },
    getInitialState(){
        return{
            activeIndex:this.props.defaultActiveIndex?this.props.defaultActiveIndex:0,
            direction:this.props.direction?this.props.direction:'right'
        }
    },
    componentDidMount(){
        this.autoPlay();
    },
    componentWillReceiveProps (){},
    componentWillUnmount(){
        clearInterval(this.timeOuter);
    },
    autoPlay(){
        if(this.props.autoPlay){
            if(this.props.direction==="right"){
                this.timeOuter=setInterval(this.playRight,this.props.interval);
            }else if(this.props.direction==="left"){
                this.timeOuter=setInterval(this.playLeft,this.props.interval);
            }
        }
    },
    playRight(indexIn){
        let index=indexIn?indexIn:this.state.activeIndex+1;
        if(index>this.props.number-1){
            index=0;
        }
        this.setState({
            activeIndex:index
        })
    },
    playLeft(indexIn){
        let index=indexIn?indexIn:this.state.activeIndex-1;
        if(index<0){
            index=this.props.number-1;
        }
        this.setState({
            activeIndex:index
        })
    },
    position(){
        switch (this.state.activeIndex){
            case 0:return "onePosition" ;
            case 1:return "twoPosition" ;
            case 2:return "therePosition" ;
            case 3:return "fourPosition";
        }
    },
    render(){
        let{ boxStyle }=this.props;
        return <div  className={boxStyle} >
            <ul className={this.position()}>
                {this.props.children}
            </ul>
        </div>
    }
});

export default LunBo;